<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="数据同步" @ok="handleOk">
            <a-radio-group v-model:value="form.type" button-style="solid" class="mb-16">
                <a-radio-button value="1">从网盘同步至实例</a-radio-button>
                <a-radio-button value="2">从实例同步至网盘</a-radio-button>
            </a-radio-group>

            <a-form @keyup.enter.native="searchQuery" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :model="form"
                v-if="form.type == 1">
                <div class="fz-14 col-8A93A7 mb-16">从网盘</div>
                <a-form-item label="Access Key ID">
                    <a-input placeholder="Access Key ID" v-model="form.reasonKey"></a-input>
                </a-form-item>

                <a-form-item label="Secret Access Key">
                    <a-input placeholder="Secret Access Key" v-model="form.reasonKey"></a-input>
                </a-form-item>

                <a-form-item label="Region">
                    <a-input placeholder="Region" v-model="form.reasonKey"></a-input>
                </a-form-item>

                <a-form-item label="Bucket Path：">
                    <a-input placeholder="Bucket Path：{bucket]/{folder}" v-model="form.reasonKey"></a-input>
                </a-form-item>

                <div class="fz-14 col-8A93A7 mb-16">至实例</div>

                <a-form-item label="实例">
                    <a-input placeholder="/workspace" v-model="form.reasonKey"></a-input>
                </a-form-item>
            </a-form>


            <a-form @keyup.enter.native="searchQuery" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :model="form"
                v-if="form.type == 2">
                <div class="fz-14 col-8A93A7 mb-16">从实例</div>

                <a-form-item label="实例">
                    <a-input placeholder="/workspace" v-model="form.reasonKey"></a-input>
                </a-form-item>

                <div class="fz-14 col-8A93A7 mb-16">至网盘</div>

                <a-form-item label="Access Key ID">
                    <a-input placeholder="请输入Access Key ID" v-model="form.reasonKey"></a-input>

                </a-form-item>

                <a-form-item label="Secret Access Key">
                    <a-input placeholder="请输入Secret Access Key" v-model="form.reasonKey"></a-input>

                </a-form-item>

                <a-form-item label="Region">
                    <a-input placeholder="Region" v-model="form.reasonKey"></a-input>

                </a-form-item>

                <a-form-item label="Bucket Path：">
                    <a-input placeholder="Bucket Path：{bucket]/{folder}" v-model="form.reasonKey"></a-input>
                </a-form-item>
            </a-form>

        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
    }
});

const form = ref({
    type: '1'
})

const emit = defineEmits(['update:modelValue']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});
// 确定按钮的回调
const handleOk = () => {

};

</script>

